<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="application/javascript" src="../../../../jquery/jquery-1.12.0-uncompressed.js"></script>
    <!--<script type="application/javascript" src="../plugin4interlace-color.js"></script>-->
    <script type="application/javascript">

        //插件编写
        ;(function($) {
            $.fn.extend({
                "alterBgColor":function(options){
                    //设置默认值
                    options=$.extend({
                        odd:"odd",	/* 偶数行样式*/
                        even:"even", /* 奇数行样式*/
                        selected:"selected" /* 选中行样式*/
                    },options);
                    $("tbody>tr:odd",this).addClass(options.odd);
                    $("tbody>tr:even",this).addClass(options.even);
                    $('tbody>tr',this).click(function() {
                        //判断当前是否选中
                        var hasSelected=$(this).hasClass(options.selected);
                        //如果选中，则移出selected类，否则就加上selected类
                        $(this)[hasSelected?"removeClass":"addClass"](options.selected)
                            //查找内部的checkbox,设置对应的属性。
                                .find(':checkbox').prop('checked',!hasSelected);
//                                .find(':checkbox').attr('checked',!hasSelected);
//                        attr方法只能生效一次，使用prop方法替换之。
//                        http://stackoverflow.com/questions/15266533/jquery-attrchecked-checked-works-only-once
//                        简言之，jQuery建议使用prop代替attr
                    });
                    // 如果单选框默认情况下是选择的，则高色.
                    $('tbody>tr:has(:checked)',this).addClass(options.selected);
                    return this;  //返回this，使方法可链。
                }
            });
        })(jQuery);

        //插件应用
        $(function(){
            $("#table2")
                    .alterBgColor()  //应用插件
                    .find("th").css("color", "red");//可以链式操作

            var text = aaa();
            alert(text);
        });

        function aaa(text) {
            return (text );
//            return (text || "");
        }
    </script>
</head>
<body>
<table id="table1">
    <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
    <tbody>
    <tr>
        <td><input type="checkbox" name="choice" value=""/></td>
        <td>张山</td>
        <td>男</td>
        <td>浙江宁波</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>李四</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
        <td>王五</td>
        <td>男</td>
        <td>湖南长沙</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>找六</td>
        <td>男</td>
        <td>浙江温州</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>Rain</td>
        <td>男</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
        <td>MAXMAN</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    </tbody>
</table>


<br /><br />


<table id="table2">
    <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
    <tbody>
    <tr>
        <td><input type="checkbox" name="choice" value=""/></td>
        <td>张山</td>
        <td>男</td>
        <td>浙江宁波</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>李四</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
        <td>王五</td>
        <td>男</td>
        <td>湖南长沙</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>找六</td>
        <td>男</td>
        <td>浙江温州</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>Rain</td>
        <td>男</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
        <td>MAXMAN</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    </tbody>
</table>
</body>
</html>